<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Item - Buttons</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>
<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Items as Links/Buttons</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-item href="#" onclick="testClick(event)">
          <ion-label>a[ion-item]</ion-label>
        </ion-item>

        <ion-item class="activated" href="#" onclick="testClick(event)">
          <ion-label>a[ion-item].activated</ion-label>
        </ion-item>

        <ion-item color="secondary" href="#" onclick="testClick(event)">
          <ion-label>a[ion-item] secondary</ion-label>
        </ion-item>

        <ion-item button id="attachClick">
          <ion-label>button[ion-item]</ion-label>
        </ion-item>

        <ion-item class="activated" onClick="testClick(event)">
          <ion-label>button[ion-item].activated</ion-label>
        </ion-item>

        <ion-item color="danger" onclick="testClick(event)">
          <ion-label>button[ion-item] danger</ion-label>
        </ion-item>

        <ion-item onclick="testClickOutsize(event)">
          <ion-button slot="start" onclick="testClick(event)">Default</ion-button>
          <ion-label>Inner Buttons</ion-label>
          <ion-button fill="outline" slot="end" onclick="testClick(event)">Outline</ion-button>
        </ion-item>

        <ion-item disabled>
          <ion-button slot="start" onclick="testClick(event)">
            <ion-icon slot="start" name="home"></ion-icon>
            Left Icon
          </ion-button>
          <ion-label>disabled left icon buttons</ion-label>
          <ion-button fill="outline" slot="end" onclick="testClick(event)">
            <ion-icon slot="start" name="star"></ion-icon>
            Left Icon
          </ion-button>
        </ion-item>

        <ion-item>
          <ion-button slot="start" onclick="testClick(event)">
            Right Icon
            <ion-icon name="home" slot="end"></ion-icon>
          </ion-button>
          <ion-label>right icon buttons</ion-label>
          <ion-button fill="outline" slot="end" onclick="testClick(event)">
            Right Icon
            <ion-icon name="star" slot="end"></ion-icon>
          </ion-button>
        </ion-item>

        <ion-item>
          <ion-button fill="clear" slot="start" size="default" onclick="testClick(event)">
            <ion-icon slot="icon-only" name="navigate"></ion-icon>
          </ion-button>
          <ion-label>icon only buttons default</ion-label>
          <ion-button fill="clear" slot="end" size="default" onclick="testClick(event)">
            <ion-icon slot="icon-only" name="navigate"></ion-icon>
          </ion-button>
        </ion-item>

        <ion-item disabled onclick="testClick(event)">
          <ion-label>ion-item disabled right icon/text button large</ion-label>
          <ion-button slot="end" size="large" onclick="testClick(event)">
            <ion-icon slot="start" name="refresh"></ion-icon>
            Refresh
          </ion-button>
        </ion-item>

        <ion-item>
          <ion-button fill="clear" slot="start" size="small" onclick="testClick(event)">
            <ion-icon slot="start" name="settings"></ion-icon>
            Settings
          </ion-button>
          <ion-label>ion-item left fill="clear" button small</ion-label>
        </ion-item>

        <ion-item>
          <ion-label>ion-item right fill="clear" button</ion-label>
          <ion-button secondary fill="clear" slot="end" onclick="testClick(event)">
            Edit
          </ion-button>
        </ion-item>

        <ion-item text-wrap>
          <ion-label>
            This is multiline text that has a
            long description of about how the text is really long
            and a <a href="#" onclick="testClick(event)">link</a>.
          </ion-label>
          <ion-button fill="outline" slot="end" onclick="testClick(event)">View</ion-button>
        </ion-item>

        <ion-item *ngFor="let data of [0,1,2,3,4]; let i = index" [class.activated]="i == 1" onclick="testClick(event)">
          <ion-avatar slot="start">
            <img src="">
          </ion-avatar>
          <ion-label><h3>ng-for {{i}}</h3></ion-label>
          <ion-badge slot="end">260k</ion-badge>
        </ion-button>

        <ion-item onclick="testClickOutsize(event)">
          <div>
            <ion-button fill="clear" slot="end" onclick="testClick(event)">
              <ion-icon slot="icon-only" name="remove-circle"></ion-icon>
            </ion-button>
            <ion-button fill="clear" slot="end" onclick="testClick(event)">
              <ion-icon slot="icon-only" name="add-circle"></ion-icon>
            </ion-button>
          </div>
        </ion-item>

      </ion-content>

  </ion-app>

  <script>
    const attach = document.getElementById('attachClick');

    attach.addEventListener('click', (ev) => {
      console.log('clicked me!', ev);
    });

    function testClick(ev) {
      console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
    }

    function testClickOutsize(ev) {
      console.log('CLICK OUTSIDE!', ev.target.tagName, ev.target.textContent.trim());
    }
  </script>
</body>
</html>
